<template>
  <view>
    <view class="box">
      <image class="logo" src="/static/logo.png"></image>
      <view class="title">测评管理系统</view>
      <view class="input">
        <i class="iconfont icon-yonghuming"></i>
        <input type="text" v-model="form.username" placeholder="请输入用户名" />
      </view>
      <view class="input">
        <i class="iconfont icon-mima"></i>
        <input type="password" v-model="form.password" placeholder="请输入密码" />
      </view>
      <view class="btn center" @click="submit">登录</view>
    </view>
  </view>
</template>

<script setup>
import { useStore } from 'vuex'
const { state, dispatch } = useStore()

onLoad((options) => {
  if (state.token)
    dispatch('goHome')
})

const form = reactive({
  // password: 'admin123',
  // username: 'super'
  password: '',
  username: ''
})

async function submit() {
  try {
    const res = await dispatch('login', form)
    dispatch('goHome')
  } catch (error) { }
}
</script>

<style lang="scss">
.box {
  width: 690rpx;
  height: 800rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    5px 5px 5px rgba(0, 0, 0, 0.1),
    5px -5px 5px rgba(0, 0, 0, 0.1),
    -5px 5px 5px rgba(0, 0, 0, 0.1),
    -5px -5px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30rpx;
  box-sizing: border-box;

  .logo {
    width: 120rpx;
    height: 120rpx;
    margin: 30rpx;
  }

  .title {
    color: #377CB7;
    font-size: 50rpx;
    font-weight: bold;
    margin-bottom: 50rpx;
  }

  .input {
    width: 600rpx;
    height: 100rpx;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    i {
      font-size: 60rpx;
      color: #ccc;
      margin-right: 20rpx;
      margin-left: 10rpx;
    }

    input {
      color: #ccc;
    }
  }

  .btn {
    background-color: #377CB7;
    color: #fff;
    width: 600rpx;
    height: 100rpx;
    border-radius: 6rpx;
    font-size: 36rpx;
  }
}
</style>
